<!-- ApprovalStatus -->
<template>
	<view class="list-item-tab" :style="style">
		<span>{{ text }}</span>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			status: [String]
		},
		methods: {},
		computed: {
			style() {
				switch (this.status) {
					case '1':
						return {
							backgroundColor: '#ffeebe',
								color: '#CB9D1B'
						}
					case '2':
						return {
							backgroundColor: '#ffeebe',
								color: '#CB9D1B'
						}
					case '3':
						return {
							backgroundColor: '#c6ffbe',
								color: '#48B237'
						}
					case '4':
						return {
							backgroundColor: '#f5222d',
								color: '#fff'
						}
					case '5':
						return {
							backgroundColor: '#34c27a',
								color: '#fff'
						}
				}
				return {
					backgroundColor: '#d1d1d1',
					color: '#fff'
				}
			},
			text() {
				switch (this.status) {
					case '1':
						return '未提交'
					case '2':
						return '提交'
					case '3':
						return '待审'
					case '4':
						return '驳回'
					case '5':
						return '同意'
					case '6':
						return '结束'
					case '7':
						return '作废'
				}
				return '未知'
			}
		}
	}
</script>

<style scoped>
	.list-item-tab {
		width: 132rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		background-color: rgba(69, 145, 254, 0.4);
		position: absolute;
		top: 0;
		right: 0;
		border-top-right-radius: 26rpx;
		border-bottom-left-radius: 20rpx;
	}
</style>